
<template>
  <div class="payment-details">
    <div class="header">
      <h2>广告详情</h2>
      <div class="btn-group">
        <el-button type="text" @click="handleDetail" icon="el-icon-refresh-right">返回</el-button>
      </div>
    </div>
  <hr />
  <div class="payment-detail-item">
    <p class="detail-value">ID：{{ paymentDetails.id }}</p>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="广告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入广告标题" />
        </el-form-item>
        <el-form-item label="广告视频" prop="video" >
         <el-input v-model="form.video" ></el-input>
        </el-form-item>
      </el-form>
      <p class="detail-value">状态：{{ paymentDetails.status=='1'?'生效中':paymentDetails.status=='2'?'已下架':'已过期' }}</p>
      <p class="detail-value">创建时间：{{ paymentDetails.creationDate }}</p>
      <p class="detail-value">推送时间：{{ paymentDetails.pushTime }}</p>
      <p class="detail-value">失效时间：{{ paymentDetails.expirationDate }}</p>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm1">保存</el-button>
        <el-button  type="primary" plain :disabled="paymentDetails.status!=1" @click="upPush">重新推送</el-button>
        <el-button type="danger" plain :disabled="paymentDetails.status!=1" @click="downPush">下架</el-button>
        <el-button v-if="paymentDetails.status==3" type="danger" plain :disabled="paymentDetails.status!=3" @click="del(paymentDetails.id)">删除</el-button>
      </div>
  </div>
    <el-dialog title="提示" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <i class="el-icon-info" style="color: #1c84c6;font-size: 24px;margin-left: 50px" ></i>
        <span style="font-size: 10px;margin-left: 5px;color: #1e1e1e">您确定重新推送该广告吗？请设置推送时间～</span>
        <el-form-item  prop="pushTime">
          <el-date-picker
              v-model="form.pushTime"
              type="datetime"
              placeholder="年/月/日--:--"
              value-format="yyyy-MM-dd HH:mm:ss">
          </el-date-picker><br/>
          <span style="color: #8c939d;font-size: 10px">推送时间必须大于当前时间</span>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm2">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
</div>
</template>

<script >
import { MessageBox } from 'element-ui';
import {getAdvertisement, updateAdvertisement, upPushStatus, downPushStatus, delAdvertisement,pushTime
} from '@/api/launch/advertisement'
 export default {
  name: "Details",
  data() {
    return {
      open:false,
      id:"",
      paymentDetails:[],
      // 弹出层标题
      title: "",
      form:{},
      // 表单校验
      rules: {
        title: [
          { required: true, message: "广告标题不能为空", trigger: "blur" }
        ],
      }
    }
  },
   created() {
    const id = this.$route.params && this.$route.params.Id;
     this.getList(id);

       getAdvertisement(id).then(response => {
         this.form = response.data;
       });
  },
  methods: {
    // 取消按钮
    cancel() {
      this.open = false;
    },
    handleDetail() {
      this.$router.push({path:"/Advertisement/advertisementes"}); // 假设支付列表页面的路由名称为 '广告列表'
    },
    /** 提交按钮 */
    submitForm1() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateAdvertisement(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
            });
          }
        }
      });
    },
    getList(id){
      getAdvertisement(id).then(response => {
        this.paymentDetails = response.data;
      });
    },
    del(id) {
      MessageBox.confirm('您确定要下架/上架/删除该广告吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'info'
      }).then(() => {
        // 在这里执行删除操作
        delAdvertisement(id).then(response=>{
          this.$router.push({path:"/Advertisement/advertisementes"});
          this.$message.success("删除成功");
        })
      }).catch(() => {
        // 取消操作时的逻辑（如果有需要，可以在这里添加）
      });
    },
    upPush() {
      this.open=true;
    },
    downPush() {

      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            downPushStatus(this.form.id).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.getList(this.form.id)
            });
          }
        }
      });
    },
    submitForm2(){
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form != null) {
            pushTime(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList(this.form.id)
            });
          }
        }
      });
    },

  }
 }
</script>

<style >
.payment-details {
  width: 1000px;
  border: 1px solid #ccc;
  padding: 20px;
}

.payment-detail-item {
    margin: 10px 0;
    padding: 5px;
}
.detail-value {
    font-size: 16px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.btn-group{
  display: flex;
  justify-content: flex-end; /* 将按钮放在最右端 */
  margin-bottom: 10px; /* 调整与标题之间的间距 */
}
</style>
